<template>
  <div class="headBox" :class="className">
    <!-- style -->
    <div v-html="css"></div>
    <div class="onechild">
      <!-- 分类一 样式1 -->
      <template v-for="(bimg, ind) in list">
        <div class="onechild_two" v-if="datas.button_number == 2" @click="tapOneClass(bimg.id)" :key="ind" :class="bimg.id == oneClassId?'':'opSone'">
          <img class="onechild_two_img" :class="bimg.id == oneClassId ? 'onechild_two_imgSelect' : ''" :src="bimg.thumb ? bimg.thumb : 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/image.png'" />
          <div class="classNameq" :class="bimg.id == oneClassId ? 'classNameSelect' : ''" v-if="datas.show_one_cate_name">{{ bimg.name }}</div>
        </div>
      </template>

      <!-- 分类一 样式2 -->
      <template v-for="(bimg, ind) in list">
        <div class="onechild_two_five" :key="ind" v-if="datas.button_number == 5" @click="tapOneClass(bimg.id)" :class="bimg.id == oneClassId?'':'opSone'">
          <img class="onechild_two_img" :class="bimg.id == oneClassId ? 'onechild_two_imgSelect' : ''" :src="bimg.thumb ? bimg.thumb : 'https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/image.png'" />
          <div class="classNameq" :class="bimg.id == oneClassId ? 'classNameSelect' : ''" v-if="datas.show_one_cate_name">{{ bimg.name }}</div>
        </div>
      </template>
    </div>
    <div class="scrollView">
      <div class="scrollView_top" v-if="list[oneClassInd] && list[oneClassInd].children.length > 0">
        <div class="leftClass_Two" v-for="(item, ind) in list[oneClassInd].children" @click="tapTwoClass(item.id)" :key="ind" :class="twoClassInd == ind ? 'leftClass_TwoSelect' : ''">
          {{ item.name }}
        </div>
      </div>
      <div class="rightClass" ref="rightClass">
        <div class="headMenuBox">
          <div class="thrClasslable" v-if="list[oneClassInd] && list[oneClassInd].children.length > 0 && list[oneClassInd].children[twoClassInd].children.length > 0">
            <div class="istwoClassName">
              <span>{{ list[oneClassInd].children[twoClassInd].name }}</span>
            </div>
            <div class="thrClassBox">
              <div
                @click="tapThrClass(thr.id)"
                :class="thrClassId == thr.id ? 'isthrClassName' : 'isthrClassName isthrClassName_none'"
                v-for="(thr, index) in ArraySlice(list[oneClassInd].children[twoClassInd].children, thrClassId)"
                :key="index"
              >
                {{ thr.name }}
              </div>
              <div
                :class="index == 7 ? 'isthrClassName' : 'isthrClassName isthrClassName_none'"
                @click="MoreBoxThrTap"
                v-if="!thrMoreShow && list[oneClassInd].children[twoClassInd].children.length > 7"
              >
                显示更多
              </div>
            </div>
          </div>
          <div class="thrClasslable_more" v-if="thrMoreShow" :style="{ height: height_right }">
            <div class="istwoClassName" style="opacity: 0">
              <span>二级分类</span>
            </div>
            <div class="moreThrClassBox">
              <div
                @click="tapThrClass(mthr.id)"
                :class="thrClassId == mthr.id ? 'isthrClassName' : 'isthrClassName isthrClassName_none'"
                v-for="(mthr, index) in list[oneClassInd].children[twoClassInd].children"
                :key="index"
              >
                {{ mthr.name }}
              </div>
            </div>
            <div @click="MoreBoxThrTap" class="hidetext" style="text-align: center; color: #afafaf; background: #fff; z-index: 999; padding-bottom: 0.625rem">点击收起</div>
            <div class="overlay"></div>
          </div>
          <div class="sortBox">
            <c-sort :show="true" @sortIn="sortOut" @showscreen="showbox" text="搜索结果"></c-sort>
          </div>
        </div>
        <div class="goodsList" ref="goodsList" @scroll.passive="handleScroll">
          <van-pull-refresh v-model="isLoading" @refresh="onRefresh" class="pull">
            <template v-if="foodInfo.length > 0">
              <div class="list" v-for="(item, index) in foodInfo" :key="index" @click="toGood(item.id)">
                <div class="listImg">
                  <img :src="item.thumb" alt="" />
                </div>
                <div class="title">{{ item.title }}</div>
                <div class="saleText" v-if="!fun.getGlobalParameter('hide_total_sales', false)">已售{{ item.show_sales + item.virtual_sales }}{{ item.sku }}</div>
                <div class="show_time_word_txt" style="margin-bottom:0.5rem;" v-if="item.show_time_word">{{item.show_time_word}}</div>
                <div class="bottom">
                  <!-- <div class="bottom_left" v-if="!item.vip_level_status">{{ $i18n.t("money") }}{{ `${item.price}` }}</div>
                  <div class="bottom_left_txt" v-if="item.vip_level_status && item.vip_level_status.status == 1">{{ item.vip_level_status.word }}</div> -->
                  <div class="bottom_left">{{ checkPrice(item) }}</div>
                  <div class="bottom_right" @click.stop="addGood(item)">
                    <div class="textRight">{{datas.button_title?datas.button_title:'立即购买'}}</div>
                    <div class="num" v-if="!fun.isTextEmpty(goodsCartsTotal[item.id])">{{ goodsCartsTotal[item.id].total }}</div>
                  </div>
                </div>
              </div>
            </template>
            <div class="listNone" v-if="foodInfo.length == 0" >{{loading? '加载中...':'暂无商品'}}</div>
            <!-- <div :class="foodInfo.length > 0 ? 'pddbox' : 'pddboxBig'"></div> -->
            <!-- <div class="ddspan" v-if="foodInfo.length > 0 && page >= total_page">下滑切换分类</div> -->
            <div class="ddspan" v-if="foodInfo.length > 0 && page < total_page">下滑加载更多</div>
          </van-pull-refresh>
        </div>
      </div>
    </div>
    <yz_optionShow ref="optionShow" v-model="popupSpecs" :goodsInfo="goodsInfo" :carts="carts" @closePopup="closePopup" @submitAction="submitAction_add"></yz_optionShow>
    <!-- 筛选弹窗 -->
    <goodScreen v-model="showGoodScreen" @clone="cloneGoodScreen" :showCategory="true"></goodScreen>
  </div>
</template>
<script>
import goodScreen from "components/ui_components/yz_goodScreen";
import cSort from "components/sort";
import yz_optionShow from "components/ui_components/yz_optionShow";
import { Toast } from "vant";
// 自定义样式
const css = function () {
  const { one_cate_font, one_cate_radius } = this.datas;

  return `
      .component-${this.id} .onechild_two .onechild_two_img {
        border-radius: ${one_cate_radius}px;
      }

      .component-${this.id} .className {
        font-size: ${one_cate_font}px;
      }
  `;
};
export default {
  props: ["datas", "id", "component_key"],
  data() {
    return {
      oneClassInd: 0,
      twoClassInd: 0,
      thrClassInd: 0,
      oneClassId: null,
      twoClassId: null,
      thrClassId: null,
      thrMoreShow: false,
      showGoodScreen: false,
      searchScreen: {},
      height_right: "",
      list: [],
      activatId: "", //当前的分类id
      foodInfo: [], //商品组
      goodsCartsTotal: [],
      cartInfo: {},
      contentlist: {},
      carts: [],
      goodsCarts: [], //购物车转为goods key的数组
      cartIDs: [],
      popNum: 0,
      popCard: [],
      cartsNum: "",
      cartsTotal: "",
      goodsInfo: {},
      optionsId: "",
      popupSpecs: false,
      isLoading: false,

      timer: null,
      last: null,
      now: null,
      scrollEndClickTag:1,

      //more
      page: 1, //分页数，当前页数
      isLoadMore: false, //判断是否要加载更多的标志
      total_page: 0, //总页数
      loading: true
    };
  },
  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    },
    ArraySlice(listArray, thrId) {
      return (listArray, thrId) => {
        let lis;
        for (let i = 0; i < listArray.length; i++) {
          if (listArray[i].id == thrId) {
            if (i < 7) {
              return (lis = listArray.slice(0, 7));
            } else {
              // console.log(listArray.length, i + 7);
              if (i + 7 <= listArray.length) {
                lis = listArray.slice(i, i + 7);
                return lis;
              } else {
                lis = listArray.slice(listArray.length - 7);
                return lis;
              }
            }
          }
        }
      };
    }
  },
  mounted() {
    let listArr = this.datas.list.list;
      for(let i = 0;i<listArr.length;i++){
        let obj = {id:0,name:'全部',children:[]}
        listArr[i].children.unshift(obj);
      }
    this.list = listArr;
    if (this.list) {
      this.checkClassId();
      this.updateData();
    }
  },
  methods: {
    toGood(id){
      this.$router.push(this.fun.getUrl("goods", { id: id }));
    },
    onRefresh() {
      // this.isLoading = false;
      let one = this.oneClassInd;
      let two = this.twoClassInd;
      let thr = this.thrClassInd;
      // let goodsList = this.$refs.goodsList;
      this.scrollEndClickTag = 1;
      let list = this.list;
      let activatId;
      if (list[one].children.length > 0) {
        // 有二级
        if (two == 0 && thr == 0) {
          activatId = this.activatId;
        }
        //console.log(list[one].children[two].children);
        if (list[one].children[two].children.length > 0) {
          console.log("有三级");
          if (thr == 0) {
            console.log("有三级 ---- 三级是第一个，切换二级分类");
            thr = 0;
            if (two == 0) {
              activatId = this.activatId;
              this.twoClassId = this.activatId;
            } else {
              two = two - 1;
              if(list[one].children[two].id == 0){
                activatId = list[one].id;
                this.twoClassId = activatId;
              }else{
                activatId = list[one].children[two].id;
                this.thrClassId = activatId;
              }
            }
          } else {
            thr = thr - 1;
            activatId = list[one].children[two].children[thr].id;
            this.thrClassId = activatId;
          }
        } else {
          console.log("没三级");
          if (two == 0) {
            //console.log("二级已经是第一个");
            activatId = this.activatId;
            this.twoClassId = activatId;
          } else {
            //console.log("二级不是第一个，切换二级");
            two = two - 1;
            if (list[one].children[two].children.length > 0) {
              //console.log("上一个二级有三级分类");
              thr = 0;
              activatId = list[one].children[two].children[thr].id;
              this.thrClassId = activatId;
            } else {
              //console.log("上一个二级mei有三级分类");
              activatId = list[one].children[two].id;
              this.twoClassId = activatId;
            }
          }
        }
      } else {
        //console.log("没有二级");
        activatId = this.activatId;
        this.oneClassId = activatId;
      }
      // this.setData({
      //   twoClassInd: two,
      //   thrClassInd: thr,
      //   activatId: activatId,
      //   refresher: false,
      //   page: 1,
      //   isLoadMore: true,
      //   total_page: 0,
      //   searchScreen: {}
      // })
      this.twoClassInd = two;
      this.thrClassInd = thr;
      this.activatId = activatId;
      this.isLoading = false;
      this.page = 1;
      this.isLoadMore = true;
      this.total_page = 0;
      this.searchScreen = {};
      this.getGoods();
    },
    handleScroll(e) {
      this.throttle();
    },
    controlBottom() {
      let heightB = this.$refs.goodsList.clientHeight + this.$refs.goodsList.scrollTop;
      let scrollHeight = this.$refs.goodsList.scrollHeight - 2;
      // console.log(heightB, scrollHeight);
      if (heightB >= scrollHeight) {
        // console.log("滚动至底部");
        this.bindscrolltolower_end();
      }
    },
    bindscrolltolower_end(e) {
      if (this.page < this.total_page) {
        this.getMore();
        return;
      }
      return
      if(this.scrollEndClickTag == 1){
        this.scrollEndClickTag = 2
        return
      }
      if(this.scrollEndClickTag){
        this.scrollEndClickTag = 1
      }
      let one = this.oneClassInd;
      let two = this.twoClassInd;
      let thr = this.thrClassInd;
      let goodsList = this.$refs.goodsList;
      let list = this.list;
      let activatId;
      if (list[one].children.length > 0) {
        //是否有二级
        // console.log('有二级')
        if (list[one].children.length - 1 == two) {
          console.log("二级最后一个");
          if (list[one].children[two].children.length > 0) {
            console.log("二级最后一个 ---- 有三级");
            if (list[one].children[two].children.length - 1 == thr) {
              console.log("二级最后一个 ---- 有三级 --- 三级最后一个 ---------- 不切换一级");
              // app.tips('没有更多了')
              this.$dialog.alert({
                message: "没有更多了"
              });
              return;
            } else {
              console.log("二级最后一个 ---- 有三级 --- 三级不是最后一个");
              thr = thr + 1;
              this.thrClassInd = thr;
              activatId = list[one].children[two].children[thr].id;
              this.thrClassId = activatId;
            }
          } else {
            console.log("二级最后一个 ---- 没三级");
            two = 0;
            this.twoClassInd = two;
            if (list[one].children[two].children.length > 0) {
              //上一个二级是有三级
              console.log("上一个二级是有三级分类");
              activatId = list[one].children[two].children[thr].id;
              this.thrClassId = activatId;
            } else {
              console.log("上一个二级没有三级分类，切换二级");
              if(list[one].children[two].id == 0){
                activatId = list[one].id;
              }else{
                activatId = list[one].children[two].id;
              }
              this.twoClassId = activatId;
            }
          }
        } else {
          console.log("二级不是最后一个");
          // this.selectThr(list,one,two,thr);
          if (list[one].children[two].children.length > 0) {
            console.log(" 有三级");
            if (list[one].children[two].children.length - 1 == thr) {
              console.log(" 有三级 --- 三级最后一个 --- 切换二级");
              two = two + 1;
              thr = 0;
              if (list[one].children[two].children.length == 0) {
                this.twoClassInd = two;
                this.thrClassInd = thr;
                activatId = list[one].children[two].id;
                this.twoClassId = activatId;
              } else {
                this.twoClassInd = two;
                this.thrClassInd = thr;
                activatId = list[one].children[two].children[thr].id;
                this.thrClassId = activatId;
              }
            } else {
              console.log("有三级 --- 三级不是最后一个");
              thr = thr + 1;
              this.thrClassInd = thr;
              console.log(list[one].children[two].children[thr].id);
              activatId = list[one].children[two].children[thr].id;
              this.thrClassId = activatId;
            }
          } else {
            console.log(" 没三级");
            two = two + 1;
            this.twoClassInd = two;
            if (list[one].children[two].children.length > 0) {
              //上一个二级是有三级
              console.log("上一个二级是有三级分类");
              activatId = list[one].children[two].children[thr].id;
              this.thrClassId = activatId;
            } else {
              console.log("上一个二级没有三级分类，切换二级");
              if(list[one].children[two].id == 0){
                activatId = list[one].id;
              }else{
                activatId = list[one].children[two].id;
              }
              this.twoClassId = activatId;
            }
          }
        }
      } else {
        console.log("没二级", this.data.activatId);
        activatId = this.data.activatId;
        this.oneClassId = activatId;
      }
      // }
      goodsList.scrollTo(0, 0);
      this.activatId = activatId;
      this.page = 1;
      this.isLoadMore = true;
      this.total_page = 1;
      console.log(activatId, "activatId");
      this.getGoods();
    },
    throttle() {
      // 节流
      let that = this;
      let interval = 200;
      that.now = +new Date();
      if (that.last && that.now - that.last < interval) {
        clearTimeout(that.timer);
        that.timer = setTimeout(() => {
          that.last = that.now;
          that.controlBottom();
        }, interval);
      } else {
        that.last = that.now;
        that.controlBottom();
      }
    },
    sortOut(e) {
      this.showGoodScreen = false;
      // if (this.goods.length == 0) {
      //   return;
      // }
      this.searchScreen.order_field = e.order_field;
      this.searchScreen.order_by = e.order_by;
      this.checkClassId();
      // this.getData(this.activatId);
    },
    cloneGoodScreen(e) {
      this.searchScreen = e;
      this.checkClassId();
    },
    closePopup() {
      this.popupSpecs = false;
    },
    //弹窗提交确认
    submitAction_add(e) {
      console.log(e);
      if (e && e.optionsId) {
        this.optionsId = e.optionsId;
      }
      this.$emit("AddCartMethod");
      this.updateData();
    },
    addGood(good) {
      if (good.has_option != 1) {
        this.numberRight(good.id, good.stock, good);
        return;
      }
      //价格权限
      if (good.vip_level_status && good.vip_level_status.status == 1) {
        Toast(good.vip_level_status.tips);
        return false;
      }
      this.popupSpecs = true;
      this.goodsInfo = good;
      // console.log(good, "dddddddddd", this.popupSpecs);
    },
    numberRight(_id, _stock, good) {
      //价格权限
      if (good.vip_level_status && good.vip_level_status.status == 1) {
        Toast(good.vip_level_status.tips);
        return false;
      }
      if (_stock == 0) {
        Toast("库存不足");
        return;
      }
      if (!this.fun.isTextEmpty(this.goodsCartsTotal[_id])) {
        if (this.goodsCartsTotal[_id].total >= _stock) {
          console.log("数量超出范围");
          Toast("库存不足");
          return;
        }
      }
      $http.get("member.member-cart.store", { goods_id: _id, total: 1 }, "").then(
        response => {
          if (response.result === 1) {
            if (!this.fun.isTextEmpty(this.goodsCartsTotal[_id])) {
              this.goodsCartsTotal[_id].total = Number(this.goodsCartsTotal[_id].total) + 1;
            }
            this.$store.commit("setCartNum", response.data.cart_num);
            this.$emit("AddCartMethod");
            this.updateData();
          } else {
            this.$dialog.alert({
              message: response.msg
            });
          }
        },
        response => {
          console.log(response);
        }
      );
    },
    updateData() {
      //更新购物车数据
      let that = this;
      $http.get("member.member-cart.index", {}).then(response => {
        if (response.result === 1) {
          console.log(response.data);
          // that.cartInfo = response.data; //更新购物车数据，避免不同步
          // that.contentlist.member_cart = response.data;
          that.getCart(response.data);
        } else {
          this.$dialog.alert({
            message: response.msg
          });
        }
      });
    },
    /**
     * 如果传了商品，通过商品id获取购物车数量
     * @param goods
     */
    getCart(goods) {
      this.carts = goods;
      this.goodsCarts = [];
      this.cartIDs = [];
      this.carts.forEach(item => {
        this.$set(this.goodsCarts, item.goods_id, item);
        if (goods && goods.id === item.goods_id) {
          goods.buyNum = item.total;
        }
        if (item.goods_id === this.goodsInfo.id && item.option_id === this.optionsId) {
          this.popNum = item.total;
          this.popCard = item;
        }
        this.cartsNum += item.total;
        this.cartsTotal += item.total * item.goods.price;

        this.cartIDs.push(item.id);
      });
      if(this.popupSpecs){
        this.$refs.optionShow.popCard = this.popCard;
      }
      this.goodsCartsTotal = this.calculateTotal(this.carts);
      // this.goodsWrapperBScroll();
    },
    //不同规格的同一商品求和
    calculateTotal(arr) {
      let newArr = [];
      let temp = {};
      let newArr2 = [];
      for (let i in arr) {
        let key = arr[i].goods_id;
        if (temp[key]) {
          let good_id = temp[key].goods_id;
          temp[key].goods_id = good_id;
          temp[key].total = temp[key].total + arr[i].total;
        } else {
          temp[key] = {};
          temp[key].goods_id = arr[i].goods_id;
          temp[key].total = arr[i].total;
        }
      }
      for (let k in temp) {
        newArr.push(temp[k]);
      }
      newArr.forEach(item => {
        this.$set(newArr2, item.goods_id, item);
      });
      return newArr2;
    },
    tapThrClass(e) {
      if (this.$refs.goodsList) {
        this.$refs.goodsList.scrollTo(0, 0);
      }
      console.log(e, "点击选择的3级id");
      let oneind = this.oneClassInd;
      this.scrollEndClickTag = 1;
      let twoind = this.twoClassInd;
      if (this.thrClassId == e) return console.log("一样的三级");
      for (let i = 0; i < this.list[oneind].children[twoind].children.length; i++) {
        if (this.list[oneind].children[twoind].children[i].id == e) {
          //所选的三级id
          this.thrClassInd = i;
          this.thrClassId = this.list[oneind].children[twoind].children[i].id;
          this.activatId = this.list[oneind].children[twoind].children[i].id;
          this.getGoods();
          break;
        }
        console.log(this.list[oneind].children[twoind].children[i]);
      }
    },
    tapTwoClass(e) {
      if (this.$refs.goodsList) {
        this.$refs.goodsList.scrollTo(0, 0);
      }
      console.log(e, "点击选择的二级id");
      let one = this.oneClassInd;
      this.scrollEndClickTag = 1;
      this.thrClassInd = 0;
      if (this.twoClassId == e) return console.log("一样的二级");
      if (e == 0) {
        this.activatId = this.list[one].id;
        this.twoClassInd = 0
        this.getGoods();
        console.log('选的二级是全部')
        return
      }
      for (let k = 0; k < this.list[one].children.length; k++) {
        // console.log("有二级");
        if (this.list[one].children[k].id == e) {
          // console.log("当前的id是二级的");
          if (this.list[one].children[k].children.length > 0) {
            console.log("二级里面有三级取三级id 因为点的是二级，三级直接取索引0");
            this.twoClassId = this.list[one].children[k].id;
            this.thrClassId = this.list[one].children[k].children[0].id;
            this.twoClassInd = k;
            this.thrClassInd = 0;
            this.activatId = this.list[one].children[k].children[0].id;
            this.getGoods();
            break;
          } else {
            // 没有三级就取二级id
            this.oneClassId = this.list[one].id;
            this.twoClassId = this.list[one].children[k].id;
            this.oneClassInd = one;
            this.twoClassInd = k;
            this.activatId = this.list[one].children[k].id;
            this.getGoods();
            break;
          }
        }
      }
    },
    tapOneClass(e) {
      this.scrollEndClickTag = 1;
      if (this.$refs.goodsList) {
        this.$refs.goodsList.scrollTo(0, 0);
      }
      console.log(e, "点击选择的一级id");
      let activatId;
      this.twoClassInd = 0;
      this.thrClassInd = 0;
      console.log(this.twoClassInd, this.thrClassInd);
      if (this.oneClassId == e) return console.log("一样的一级");
      for (let i = 0; i < this.list.length; i++) {
        if (this.list[i].id == e) {
          //console.log("所选的一级id和索引", this.list[i].id, i);
          if (this.list[i].children.length > 0) {
            // 选择的一级是否有二级

            //console.log(i, "二级id和索引", this.list[i].children, this.twoClassInd);
            if (this.list[i].children[this.twoClassInd].children.length > 0) {
              // 选择的一级是否有三级
              this.thrClassInd = 0;
              this.thrClassId = this.list[i].children[0].children[0].id;
              activatId = this.list[i].children[0].children[0].id;
              // console.log(i, "选择的一级里面有三级");
            } else {
              this.thrClassInd = 0;
              this.thrClassId = null;
              if(this.list[i].children[0].id == 0){
                // console.log("二级是全部")
                activatId = this.list[i].id;
              }else{
                activatId = this.list[i].children[0].id;
              }
              console.log(i,activatId, "选择的一级里面没有三级");
            }
            this.oneClassInd = i;
            this.twoClassInd = 0;
            this.oneClassId = this.list[i].id;
            this.twoClassId = this.list[i].children[0].id;
            this.activatId = activatId;
            this.getGoods();
          } else {
            // console.log(i, "选择的一级里面没有二级");.
            this.oneClassInd = i;
            this.oneClassId = this.list[i].id;
            this.twoClassInd = 0;
            this.twoClassId = null;
            this.activatId = this.list[i].id;
            this.getGoods;
          }
          break;
        }
      }
    },
    checkClassId() {
      let one = this.oneClassInd;
      let two = this.twoClassInd;
      let thr = this.thrClassInd;
      let list = this.list;
      let activatId;
      if (list[one].children.length > 0) {
        if (list[one].children[two].children.length > 0) {
          this.oneClassId = list[one].id;
          this.twoClassId = list[one].children[two].id;
          this.thrClassId = list[one].children[two].children[thr].id;
          activatId = list[one].children[two].children[thr].id;
        } else {
          this.oneClassId = list[one].id;
          this.twoClassId = list[one].children[two].id;
          this.thrClassId = null;
          if(list[one].children[two].id == 0){
            activatId = list[one].id;
          }else{
            activatId = list[one].children[two].id;
          }
        }
      } else {
        this.oneClassId = list[one].id;
        this.twoClassId = null;
        this.thrClassId = null;
        activatId = list[one].id;
      }
      this.activatId = activatId;
      this.getGoods();
    },
    showbox(e) {
      this.showGoodScreen = !this.showGoodScreen;
    },
    MoreBoxThrTap() {
      this.thrMoreShow = !this.thrMoreShow;
      if (!this.height_right) {
        this.height_right = this.$refs.rightClass.offsetHeight + "px";
      }
    },
    getGoods() {
      let that = this;
      let price;
      if (this.searchScreen.top || this.searchScreen.mini) {
        if (!this.searchScreen.mini) {
          price = this.searchScreen.top;
        } else {
          price = `${this.searchScreen.mini}${this.searchScreen.top ? "," + this.searchScreen.top : this.searchScreen.top ? this.searchScreen.top : ""}`;
        }
      }
      let jsons = {
        category_id: this.activatId,
        goods_page: 1,
        order_field: this.searchScreen.order_field || "",
        order_by: this.searchScreen.order_by || "",
        "search[brand_id]": this.searchScreen.brandId || "",
        "search[product_attr]": this.searchScreen.attrstr || "",
        "search[filtering]": this.searchScreen.filterId || "",
        "search[price_range]": price || ""
      };
      this.loading = true;
      $http.get("goods.category.get-goods-list-by-category-id", jsons, "").then(response => {
        if (response.result == 1) {
          that.page = 1;
          that.isLoadMore = true;
          that.total_page = response.data.last_page;
          if (!that.total_page) {
            that.total_page = 0;
          }
          if (that.page < that.total_page) {
            that.LoadMoreTest = "加载更多";
          } else {
            that.LoadMoreTest = "没有更多";
          }
          that.foodInfo = response.data.data;
          this.loading = false;
          // setTimeout(() => {
          //   that.activeName = [];
          // }, 800);
          // if (this.foodScroll) {
          //   // 因为设置0，0没效果所以设置0，1
          //   this.foodScroll.scrollTo(0, 1);
          // }
        } else {
          console.log(response.msg);
        }
      });
    },
    getMore() {
      this.isLoadMore = false; // 防止多次请求分页数据
      const that = this;
      if (that.page >= that.total_page) {
        that.LoadMoreTest = "没有更多";
        return;
      } else {
        // console.log("加载更多");
        that.page += 1;
        let price;
        if (this.searchScreen.top || this.searchScreen.mini) {
          if (!this.searchScreen.mini) {
            price = this.searchScreen.top;
          } else {
            price = `${this.searchScreen.mini}${this.searchScreen.top ? "," + this.searchScreen.top : this.searchScreen.top ? this.searchScreen.top : ""}`;
          }
        }
        $http
          .get(
            "goods.category.get-goods-list-by-category-id",
            {
              goods_page: that.page,
              category_id: that.activatId,
              order_field: this.searchScreen.order_field || "",
              order_by: this.searchScreen.order_by || "",
              "search[brand_id]": this.searchScreen.brandId || "",
              "search[product_attr]": this.searchScreen.attrstr || "",
              "search[filtering]": this.searchScreen.filterId || "",
              "search[price_range]": price || ""
            },
            ""
          )
          .then(res => {
            that.isLoadMore = true;
            if (res.result == 1) {
              var nextPageData = res.data.data;
              that.foodInfo = that.foodInfo.concat(nextPageData); //进行数组拼接
            } else {
              that.page = that.page - 1;
              that.isLoadMore = false;
              return;
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    },
    // 判断有没有区间价格
    checkPrice(item){
      if(item.vip_level_status && item.vip_level_status.status == 1){
        return item.vip_level_status.word;
      }else if(item.has_option == 1 && item.min_price && this.searchScreen.order_field === 'min_price'){
        // 如果有规格，升序并且有区间价格就显示最低价格
        return item.min_price;
      }else if(item.has_option == 1 && item.max_price && this.searchScreen.order_field === 'max_price'){
        // 如果有规格，降序并且有区间价格就显示最低价格
        return item.max_price;
      } else if(item.has_option == 1 && item.min_price){
        // 如果有规格，没有按价格排序并且有区间价格就显示最低价格
        return item.min_price;
      }else{
        return item.price;
      }
    },
  },
  components: {
    goodScreen,
    cSort,
    yz_optionShow
  }
};
</script>
<style lang="scss" scoped>
.scrollView_top {
  width: 5.23rem;
  margin-bottom: 4rem;
  overflow: auto;
  background: #f7f7f7;
}
.onechild::-webkit-scrollbar {
  display: none;
}
.pddbox {
  width: 100%;
  padding-bottom: 20rem;
}
.pddboxBig {
  width: 100%;
  padding-bottom: 40rem;
}
.headBox {
  height: 100%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.scrollView {
  flex: 1;
  display: flex;
  overflow: hidden;
}

.leftClass_Two {
  // height: 3.125rem;
  // line-height: 3.125rem;
  // text-align: center;
  font-size: 0.88rem;
  color: #666666;
  // padding: 0 0.625rem;
  box-sizing: border-box;
  // overflow: hidden;
  // text-overflow: ellipsis;
  // white-space: nowrap;
  display: flex;
  align-items: center;
  text-align: left;
  padding: 1rem 0.7rem;
  line-height: 1.2;
}
.leftClass_TwoSelect {
  background: #f6e6e6;
  position: relative;
  font-size: 0.94rem;
  font-weight: bold;
  color: #f15353;
}
.leftClass_TwoSelect::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 0;
  width: 0.2rem;
  height: 60%;
  background: #f15353;
  border-radius: 0.06rem;
}

.onechild {
  flex-shrink: 0;
  padding: 0.625rem 1rem;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  overflow-x: auto;
}
.onechild_two_five {
  width: 20%;
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  .onechild_two_img {
    width: 2rem;
    height: 2rem;
    border-radius: 100%;
  }
}
.classNameq {
  width: 100%;
  padding: 0 0.3125rem;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 auto;
}
.classNameSelect {
  color: #f15353;
}
.onechild_two {
  margin-right: 1.25rem;
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
}

.onechild_two:last-child {
  margin-right: 0;
}

.onechild_two .onechild_two_img {
  width: 10rem;
  height: 4.375rem;
}

.onechild_two text {
  text-align: center;
}

.onechild_five {
  border-radius: 0.25rem;
  display: flex;
  flex-direction: column;
}

.onechild_five .onechild_five_img {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: red;
}

.onechild_five text {
  text-align: center;
}

.scrollView_left {
  width: 24%;
  overflow-y: auto;
  padding-bottom: 3.125rem;
}

.thrClasslable {
  padding: 0.63rem;
  padding-bottom: 0;
}

.istwoClassName {
  display: flex;
  align-items: center;
  margin-bottom: 0.625rem;
}

.istwoClassName .line {
  width: 0.1875rem;
  height: 0.9375rem;
  background-color: #ef5452;
  margin-right: 0.625rem;
  border-radius: 0.1563rem;
}

.istwoClassName span {
  font-size: 0.81rem;
  color: #ef5452;
}

.thrClassBox {
  display: flex;
  flex-wrap: wrap;
  position: relative;
}

.moreThrClass {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
}

.thrClasslable_more {
  padding: 0.625rem;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  z-index: 100;
}

.overlay {
  flex: 1;
  background: #000;
  opacity: 0.4;
}

.moreThrClassBox {
  display: flex;
  flex-wrap: wrap;
}

.thrClasslable_more .moreThrClassBox {
  background: #fff;
  z-index: 999;
  display: flex;
  flex-wrap: wrap;
}

.isthrClassName {
  width: 3.94rem;
  height: 1.69rem;
  border-radius: 0.84rem;
  color: #ffffff;
  background-color: #ef5452;
  margin-bottom: 0.78rem;
  margin-right: 0.31rem;
  line-height: 1.69rem;
  text-align: center;
  font-size: 0.69rem;
}
.isthrClassName:nth-child(4n) {
  margin-right: 0;
}
.isthrClassName_none {
  color: #696969;
  background: #f8f8f6;
  font-size: 0.69rem;
}

// .goodsList {
//   padding: 0.625rem;
// }

.headMenuBox {
  position: sticky;
  top: 0;
  background: #fff;
  flex-shrink: 0;
  z-index: 1;
}
.goodsList {
  z-index: 0;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  .list {
    width: 8rem;
    margin-bottom: 1.25rem;
    .listImg {
      width: 8rem;
      height: 8rem;
      border-radius: 0.31rem;
      img {
        width: 100%;
        height: 100%;
        border-radius: 0.31rem;
      }
    }
    .title {
      margin-top: 0.69rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      text-align: left;
    }
    .saleText {
      text-align: left;
      font-size: 0.63rem;
      color: #999999;
      margin: 0.53rem 0 1rem 0;
    }
    .bottom {
      display: flex;
      justify-content: space-between;
      .bottom_left_txt{
        font-size: 0.63rem;
        color: #f15353;
        font-weight: 400;
        max-width: 60%;
        flex: 1;
        text-align: left;
      }
      .bottom_left {
        font-size: 0.63rem;
        color: #f15353;
        font-weight: 400;
        max-width: 60%;
        flex: 1;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        text-align: left;
      }
      .bottom_right {
        flex-shrink: 0;
        max-width: 50%;
        position: relative;
        .textRight{
          overflow: hidden;
          font-size: 0.375rem;
          text-overflow:ellipsis;
          white-space: nowrap;
          background-color: #f15353;
          color: #fff;
          border-radius: 0.625rem;
          padding: 0.1563rem 0.5rem;
        }
        .num {
          position: absolute;

          top: -10%;
          right: 10%;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          min-width: 16px;
          width: auto;
          padding: 0 3px;
          color: #000;
          font-weight: 500;
          font-size: 10px;
          text-align: center;
          background-color: #ffcc33;
          border: 1px solid #fff;
          border-radius: 16px;
          -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
          -webkit-transform-origin: 100%;
          transform-origin: 100%;
        }
      }
    }
  }
}
.rightClass {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 2.81rem;
}
::v-deep .pull {
  width: 100%;
  padding: 0.625rem;
}
::v-deep .pull .van-pull-refresh__track {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  width: 100%;
}
.onechild_two_imgSelect{
  box-shadow: 0px 0px 4px 0px #f15353;
}
.listNone{
  text-align: center;
  color: #666666;
  width: 100%;
}
.opSone{
  opacity: 0.3;
}
.ddspan{
  text-align: center;
  width: 100%;
  color: #999999;
}
</style>